<template>
    <el-row :gutter="20" class="body_box">
        <el-col :span="24" class="topTitle">学生web端管理系统</el-col>
        <div class="body_box_bottom">
            <el-col :span="4" class='bottom_left'>
                <el-menu :default-active="$route.path" class="el-menu-vertical-demo" unique-opened router>
                    <div v-for="(item,index) in $router.options.routes" :key="index" v-if="!item.hidden">
                        <el-submenu :index="index+''" v-if="item.name">
                            <template slot="title">
                                <i :class="item.icon"></i>{{item.name}}</template>
                            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else-if="item.children[0]" :index="item.children[0].path">
                            <i :class="item.icon"></i>{{item.children[0].name}}</el-menu-item>
                    </div>
                </el-menu>
            </el-col>        
            <el-col :span="20" class="container bottom_right">
                <div style='padding:0 10px;'>
                    <el-col :span="24" class="bottom_top">
                        <strong class="title">{{$route.name}}</strong>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb separator="/" class="breadcrumb-inner">
                                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path" style="display:block;line-hright:24px;">
                                    {{ item.name }}
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-breadcrumb>
                    </el-col>
                </div>          
                
                <el-col :span="24" style="">
                     <div id="app">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-col>
        </div>        
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        mounted () {
        }
    }
</script>
<style>
 html,body{margin:0;padding:0;height:100%}
.topTitle {height: 80px;line-height: 80px;background: #3090ff;color: #fff;font-size: 24px;padding-left:30px!important;}
.body_box{height:100%; margin:0px!important;}
.container {padding-top: 20px;overflow-y: auto}
.title {float: left; color: #475669;}
.breadcrumb-inner {float: right;margin-right:30px;}
.bottom_left{align-items:stretch;background:#EEF1F6;flex: 0 0 200px;padding:0!important;}
.bottom_right{overflow-y: auto;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;padding:0!important}
.body_box_bottom{display: -webkit-box;display: -ms-flexbox;display: flex;position: absolute;top: 80px;bottom: 0;width: 100%;}
.bottom_top{border-bottom:3px solid #3090ff;padding:10px;margin-top: 15px;}
</style>

